<template>
  <div class="content">
    <ul>
      <li
        v-for="item in list"
        :key="item.housesCode"
        @click="skip(item.houseCode)"
      >
        <img :src="url + item.houseImg" alt="" />
        <div class="right">
          <h4>{{ item.title }}</h4>
          <span>{{ item.desc }}</span><br>
          <span class="state" v-for="arr in item.tags" :key="arr">{{ arr }}</span>
          <div class="price">{{ item.price }}月/元</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HouseState',
  data () {
    return {
      url: 'http://liufusong.top:8080'
    }
  },

  props: ['list'],
  methods: {
    skip (id) {
      this.$router.push('/contented')
      this.$store.commit('user/setHouseId', id)
    }
  }
}
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.content {
  width: 100%;
  padding: 10px 10px;
  li {
    display: flex;
    margin-bottom: 10px;
    img {
      margin: auto 10px auto 0;
      background-color: #ccc;
      width: 100px;
      height: 80px;
    }
    .right {
      span {
        font-size: 10px;
        color: #ccc;
      }
      .state {
        width: 50px;
        text-align: center;
        padding: auto;
        color: #6ccfda;
        border-radius: 5px;
        height: 20px;
        font-size: 10px;
        background-color: #e1f5f8;
        margin-bottom: 5px;
        margin-top: 5px;
        margin-right: 5px;
      }
      .price {
        color: #fa5741;
        font-weight: 600;
        font-size: 14px;
      }
    }
  }
}
</style>
